<template name="headerRoom">
	<header class="rc-header rc-header--room" >
		<div class="rc-header__wrap">

			<div class="rc-header__block rc-header--burger">
				{{> burger}}
			</div>

			{{#if isDiscussion}}
				<div class="rc-header__block rc-header__block--action js-open-parent-channel rc-tooltip rc-tooltip--down rc-tooltip--start" aria-label={{_ "Back_to_room"}}>
					<span class="rc-header__first-icon">{{> icon block="rc-header__icon rc-header__icon" icon="back"}}</span>
				</div>
			{{/if}}

			{{#if isToggleFavoriteButtonVisible}}
				<div class="rc-header__block rc-header__favorite rc-header__block--action">
					<button aria-label="{{toggleFavoriteButtonIconLabel}}" type="button" class="rc-header__toggle-favorite {{#if isToggleFavoriteButtonChecked}}rc-header__toggle-favorite--checked{{/if}} rc-header__first-icon rc-tooltip rc-tooltip--down rc-tooltip--start js-favorite">
						{{> icon block="rc-header__icon" icon=toggleFavoriteButtonIcon}}
					</button>
				</div>
			{{/if}}

			<!-- TODO: fix it style and helper -->
			{{#if tokenAccessChannel}}
				<i class="icon-tokenpass" aria-label="{{_ "Tokenpass_Channel_Label"}}"></i>
			{{/if}}

			<div class="rc-header__content rc-header__block">
				{{#if isDirect}}
				<div class="rc-header__block">
					<div class="rc-header__image">
						{{> avatar username=avatarBackground}}
					</div>
				</div>
				{{/if}}

				<div class="rc-header__data">
					{{#unless secondaryName}}
					<div class="rc-header__name">{{> icon block="rc-header__icon" icon=roomIcon}}{{roomName}}</div>
					{{else}}
					<div class="rc-header__name">{{roomName}} <div class="rc-header__username">@{{secondaryName}}</div></div>
					{{/unless}}

					{{#if isDirect}}
					{{# userPresence uid=uid}}<span class="rc-header__status">
						<div class="rc-header__status-bullet rc-header__status-bullet--{{userStatus}}" title="{{_ userStatus}}"></div>
						<div class="rc-header__visual-status">{{userStatusText}}</div>
					</span>{{/userPresence}}
					{{else}}
					{{#if roomTopic}}<span class="rc-header__topic">{{{roomTopic}}}</span>{{/if}}
					{{/if}}
				</div>

				{{#if sentimentSmile}}
				<span class="sentiment">{{sentimentSmile}}</span>
				{{/if}}
				{{#if isTranslated}}
				<i class="icon-language" aria-label="{{_ "Translated"}}"></i>
				{{/if}}
			</div>

			{{#if isSection}}
			<span class="rc-header__block">{{_ sectionName}}</span>
			{{/if}}
			{{#if encryptionState}}
			<div class="rc-header__block rc-header__block-action rc-header__encryption">
				<div class="rc-room-actions">
					<button aria-label="{{_ 'E2E_Enabled'}}" class="rc-tooltip rc-tooltip--down rc-room-actions__action tab-button rc-header__toggle-encryption js-toggle-encryption {{encryptionState}}">{{> icon icon="key"}}</button>
				</div>
			</div>
			{{/if}}
			{{#if Template.contentBlock}}
				{{> Template.contentBlock}}
			{{/if}}
		</div>
	</header>
</template>
